<template>
    <view>
        <view class="box-top" v-for="(item,index) in dataArray" :key="index">
            <view class="left-box-top">{{item.time}}</view> <!-- 左边 -->

            <view class="line" :class="{active:item.active,none:index==(dataArray.length-1)}">
                <!-- 中线 -->
                <view class="dot flex-row ai-center jc-center" :class="{active:item.active,none:index==(dataArray.length-1)}">
                    <u-icon size="20" name="checkbox-mark" color="#fff"></u-icon>
                </view>
                <!-- <view class="dot" :class="{active:item.active,none:index==(dataArray.length-1)}"></view> -->
                <!-- 圆点 -->
                <view v-if="index==(dataArray.length-1)&&item.type==1">
                    <u-loading size="30" class="loading" mode="fllow"></u-loading>
                </view>
                <view class="fail flex-row ai-center jc-center"   v-if="index==(dataArray.length-1)&&item.type==0">
                    <u-icon size="20" name="close" color="#fff"></u-icon>
                </view>
            </view>

            <view class="right-box-top">
                <!-- 右边 -->
                <view>{{item.title}}</view>
                <view>{{item.content}}</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            dataArray: {
                type: Array
            }
        },
        data() {
            return {}
        },
        mounted() {},
        methods: {}
    }
</script>

<style scoped="scoped" lang="less">
    .box-top {
        width: 100%;
        min-height: 120rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;

        .left-box-top {
            width: 180rpx;
            text-align: center;
            color: rgba(0, 170, 255, 1.0);
            font-size: 20rpx;
        }

        .line {
            width: 4rpx;
            background-color: rgba(0, 170, 255, 1.0);
            margin: 0 20rpx 0 20rpx;

            .dot {
                width: 30rpx;
                height: 30rpx;
                background-color: rgba(0, 170, 255, 1.0);
                border-radius: 50%;
                position: relative;
                left: -10rpx;
            }
            .loading {
                width: 20rpx;
                height: 20rpx;
                background-color: #ff2828;
                border-radius: 50%;
                position: relative;
                left: -12rpx;
                top: -40rpx;
            }
            .fail {
                width: 30rpx;
                height: 30rpx;
                background-color: #ff2828;
                border-radius: 50%;
                position: relative;
                left: -12rpx;
                top: -30rpx;
            }
        }

        .right-box-top {
            flex: 1;
            padding: 0 0 20rpx 0;
        }
    }

    //激活元素
    .active {
        background-color: rgba(44, 143, 233, 1) !important;
    }

    // 隐藏元素
    .none {
        background-color: rgba(0, 0, 0, 0) !important;
    }
</style>
